<template>
	<view>
		<setting-pay-pwd v-if="!hasPayPwd" desc="请先设置支付密码" @done="hasPayPwd = true,pay()" />
		<uni-popup ref="payDialog" type="dialog" :mask-click="false">
			<view class="main">
				<view class="title">
					请输入支付密码
				</view>
				<view class="pay-box">
					<input class='input' v-model="paypwd[0]" maxlength="1" @input="inputE(0,$event)" @focus="resetFocus(0)"
						:focus="focus[0]" :class="activeIdx == 0 ?  'active':''"  />
					<input class='input' v-model="paypwd[1]" @input="inputE(1,$event)" type="number" maxlength="1"
						@focus="resetFocus(1)" :focus="focus[1]" :class="activeIdx == 1 ?  'active':''" />
					<input class='input' v-model="paypwd[2]" @input="inputE(2,$event)" type="number" maxlength="1"
						@focus="resetFocus(2)" :focus="focus[2]" :class="activeIdx == 2 ?  'active':''" />
					<input class='input' v-model="paypwd[3]" @input="inputE(3,$event)" type="number" maxlength="1"
						@focus="resetFocus(3)" :focus="focus[3]" :class="activeIdx == 3 ?  'active':''" />
					<input class='input' v-model="paypwd[4]" @input="inputE(4,$event)" type="number" maxlength="1"
						@focus="resetFocus(4)" :focus="focus[4]" :class="activeIdx == 4 ?  'active':''" />
					<input class='input' v-model="paypwd[5]" @input="inputE(5,$event)" type="number" maxlength="1"
						@focus="resetFocus(5)" :focus="focus[5]" :class="activeIdx == 5 ?  'active':''" />
				</view>
				<view class="btn-layout">
					<button class="btn" type="default" size="normal" @click.stop="cancel">取消</button>
					<button class="btn" type="primary" size="normal" @click.stop="confirm">确定</button>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import SettingPayPwd from "pages/my/setting/SettingPayPwd";
	import {
		hasPayPwd,
		validPayPwd,
		updateOrder
	} from "network/user";
	import {
		mapMutations
	} from "vuex";
	export default {
		components: {
			SettingPayPwd,
		},
		props: {
			goods: {
				type: Object,
				default () {
					return {};
				},
			},
			price: {
				type: String,
				default () {
					return "";
				},
			},
			count: {
				type: Number,
				default () {
					return 0;
				},
			},
			address_i: {
				type: [Number,Object],
				default () {
					return 0;
				},
			},
			tag: {
				type: String,
				default () {
					return ""
				}
			},
			//是否在外部处理付款
			self: {
				type: Boolean,
				default () {
					return false
				}

			},
		},
		data() {
			return {
				paypwd: ["", "", "", "", "", "", ],
				payPwd: null,
				hasPayPwd: true,
				focus: [false, false, false, false, false, false, ],

			};
		},
		computed: {
			activeIdx() {
				let idx = -1;
				this.focus.forEach((v, i) => {
					if (v)
						idx = i;
				})
				return idx;
			}
		},
		methods: {
			...mapMutations(["deleteOrderedGoods", "clearBought"]),
			cancel(data) {
				if (this.self) {
					this.info('已取消');
					this.$emit('close');
				} else {
					this.updateOrder(false);
				}
			},
			confirm() {
				if (this.paypwd.every((v => v != ""))) {
					let pwd = "";
					this.paypwd.forEach(v => pwd += v)
					this.validPayPwd(pwd);
				} else {
					this.error('请输入正确的支付密码');
				}
			},
			pay() {
				uni.showModal({
					title: "支付确认",
					content: `确认支付${this.price}元?`,
					showCancel: true,
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.$refs.payDialog.open();
							this.$set(this.focus, 0, true);
						} else {
							this.$emit('close');
						}
					},
				})
			},
			inputE(tag, e) {
				let {
					keyCode,
					value
				} = e.detail;
				console.log('value', value, e, this.focus);
				if (keyCode == 8 || keyCode == 46) {
					if (tag > 0) {
						this.resetFocus(tag - 1);
					}
				} else if (value) {
					if (tag < 5) {
						this.resetFocus(tag + 1);
					}
				}
			},
			resetFocus(tag) {
				this.focus.forEach((v, i, arr) => {
					if (i != tag) {
						this.$set(this.focus, i, false);
					} else {
						this.$set(this.focus, i, true);
					}
				})
			},
			async updateOrder(payed) {
				let address_i = this.address_i,
					price = this.price,
					count = this.count,
					data = this.goods;
				await updateOrder({
						payed,
						price,
						count,
						data: this.goods,
						address_i,
					})
					.then(async (res) => {

						if (res[1].data.tag) {
							if (payed) {
								await this.success('下单成功');
								uni.redirectTo({
									url: `/pages/my/order/MyOrder?tag=2`
								})

							} else {
								await this.error('订单未支付');
								uni.redirectTo({
									url: `/pages/my/order/MyOrder?tag=1`
								})

							}
							if (this.tag == 0) {
								this.deleteOrderedGoods();
							} else if (this.tag == 1) {
								this.clearBought();
							}
						} else {
							this.error('下单失败,请重试');
						}
					})
					.catch(async () => {
						await this.error('下单失败');
						uni.redirectTo({
							url: `/pages/my/order/MyOrder?tag=1`
						})

					});
			},

			async validPayPwd(pwd) {
				let data = {
					pwd
				};
				await validPayPwd(data).then(async (res) => {
					if (res[1].data.tag) {
						//在外部处理支付
						if (this.self) {
							this.$emit('success');
						} else {
							this.updateOrder(true);
						}
					} else {
						this.error('支付密码错误');
						this.$set(this.focus, 5, true);
					}
				});
			},
		},
		created() {
			hasPayPwd().then((res) => {
				this.hasPayPwd = res[1].data.tag;
				if (this.hasPayPwd)
					this.pay();
			});
		},
	};
</script>
<style lang="scss" scoped>
	.main {
		width: 80vw;
		padding: 10rpx 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.btn-layout {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 20rpx auto;
	}

	.btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.title {
		font-size: 32rpx;
		text-align: center;
	}


	::v-deep .pay-box {
		width: 80vw;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.input {
			margin-left: 10rpx;
			height: 60rpx;
			width: 70rpx;
			border: 2rpx solid black;
			font-size: 38rpx;
			text-align: center;
			// caret-color: transparent;
		}
	}

	// ::v-deep .uni-input-input,
	// .uni-input-placeholder {
	// 	text-align: center;
	// }

	.active {
		background-color: #ccff99;
	}
</style>
